<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">
        <title>菜单信息</title>
        <link rel="stylesheet" href="/static/lib/layui/css/layui.css" media="all">
        <link rel="stylesheet" href="/static/css/public.css" media="all">
        <style>
            body {
                background-color: #ffffff;
            }

            .layui-input-block {
                margin-left: 65px;
            }

            .layui-form-label {
                width: 60px;
                padding: 9px 0px;
            }
        </style>
    </head>
    <body>
        <div class="layui-container">
            <form method="post" class="layui-form" onsubmit="return false">
                <div class="layui-form-item">
                    <label class="layui-form-label">菜单名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" lay-verify="required" th:value="${menu?.title}"
                               lay-reqtext="菜单名称不能为空" placeholder="请输入菜单名称" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">菜单地址</label>
                    <div class="layui-input-block">
                        <input type="text" name="href" th:value="${menu?.href}"
                               placeholder="请输入菜单地址" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">权限标识</label>
                    <div class="layui-input-block">
                        <input type="text" name="authority" th:value="${menu?.authority}"
                               placeholder="请输入权限标识" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">父菜单</label>
                    <div class="layui-input-block">
                        <input id="parentName" type="text" name="parentname" readonly th:value="${menu?.parentName}"
                               placeholder="请选择父菜单(未选择为顶级菜单)" class="layui-input" style="width:80%;float:left;">
                        <button class="layui-btn layui-bg-gray" id="parent-clear" style="width:18%;float:right;">清除
                        </button>
                    </div>
                    <div class="layui-hide">
                        <input id="parentId" placeholder="隐藏的父菜单id" value="0" name="parentId"
                               th:value="${menu?.parentId}">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">类型</label>
                    <div class="layui-input-block">
                        <input type="radio" name="type" value="1" title="菜单" checked="checked">
                        <input type="radio" name="type" value="2" th:checked="${menu?.type}=='2'" title="按钮">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">排序</label>
                    <div class="layui-input-block">
                        <input type="text" name="sort" th:value="${menu?.sort}"
                               placeholder="排序" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">描述</label>
                    <div class="layui-input-block">
                        <input type="text" name="description" th:value="${menu?.description}"
                               placeholder="描述" class="layui-input">
                    </div>
                </div>
                <div class="layui-hide">
                    <button lay-submit id="save" lay-filter="save">确认</button>
                </div>
            </form>
        </div>
        <script src="/static/lib/layui/layui.js" charset="utf-8"></script>
        <script>
            layui.use(['form'], function () {
                var form = layui.form;
                var $ = layui.$;

                var parentName = $("#parentName");
                var parentId = $("#parentId");
                parentName.click(function () {
                    var open = layer.open({
                        title: '选择菜单',
                        type: 2,
                        shadeClose: true,
                        scrollbar: false,
                        area: ['90%', '90%'],
                        btn: ['确定', '取消'],
                        btnAlign: 'c',
                        content: '/sys/menu/parent/show',
                        yes: function (index, layero) {
                            var body = layer.getChildFrame('body', index);
                            //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                            var iframeWin = window[layero.find('iframe')[0]['name']];
                            var parent = iframeWin.checkedbox.parentId;
                            var type1 = $("input[name=type][value='1']");
                            var type2 = $("input[name=type][value='2']");
                            if(parent==null){
                                parentId.val('0');
                                parentName.val('');
                                layer.close(index);
                                return;
                            }
                            if (parent  == 0) {
                                type1.removeAttr("disabled","disabled");
                                type1.next().removeClass('layui-radio-disbaled layui-disabled');
                                type1.prop("checked","true");
                                form.render('radio');
                            }else{ //父id不为0，则禁用菜单选择
                                type1.attr("disabled","disabled");
                                type1.next().addClass('layui-radio-disbaled layui-disabled');
                                type2.prop("checked","true");
                                form.render('radio');
                            }
                            parentId.val(iframeWin.checkedbox.id);
                            parentName.val(iframeWin.checkedbox.title);
                            layer.close(index);
                        }
                    });
                });
                $("#parent-clear").click(function () {
                    parentId.val('0');
                    parentName.val('');
                });
            });
        </script>
    </body>
</html>